import { useState, useEffect } from 'react';
import { Entypo } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import { useAuth } from '../context/AuthProvider';
import { Shadow } from 'react-native-shadow-2';
import { FlatList, StyleSheet, TouchableOpacity, Text, Button, View, Image, ImageBackground, ScrollView } from 'react-native';

const Center = ({ navigation }) => {

    const { user } = useAuth();
    console.log(user.avatarUrl);
    const onBtn = () => {
        navigation.navigate('Setting')
    }
    const onDepositRefund = () => {
        navigation.navigate('DepositRefund')
    }
    const onRelease = () => {
        navigation.navigate('MyRelease')
    }
    const onPackage = () => {
        navigation.navigate('MyPackage')
    }
    const onChat = () => {
        navigation.navigate('Chat')
    }
    return (
        <View style={{ flex: 1 }}>
            <ImageBackground source={require('../img/bgimg.jpg')} style={styles.bgimg}>
                <View style={styles.djx1}>
                    <Text style={styles.djx2}>
                        {
                            JSON.stringify(user) === "{}"
                                ? <Entypo
                                    name='add-user'
                                    size={64}
                                />
                                : <View>
                                    <Image
                                        source={{ uri: 'http://8.142.171.141:8080/school-news/user/img?path='+user.avatarUrl }}
                                        style={{ width: 8, height: 8 }}
                                    />
                                </View>
                        }
                    </Text>
                    <View style={styles.djx3}>
                        <Text style={{ height: "40%", marginTop: "6.5%" }}>
                            {
                                JSON.stringify(user) === "{}"
                                    ? '用户名：未登录'
                                    : <Text>用户名：{user.userName}</Text>
                            }
                        </Text>
                        <Text style={{ height: "30%" }}>
                            {
                                JSON.stringify(user) === "{}"
                                    ? '生日：未登录'
                                    : <Text>生日：{user.birthday}</Text>
                            }
                        </Text>
                    </View>
                </View>
                <View style={styles.djx4}>
                    <View style={{ marginTop: 20 }}>
                        <View style={{ marginLeft: "15%" }}>
                            <AntDesign
                                name="creditcard"
                                size={45}
                                color="orange"
                            />
                            <Text style={{ marginLeft: "-1%" }}>
                                我的订单
                            </Text>
                        </View>
                        <View style={{ marginTop: "-17%", marginLeft: "44%" }}>
                            <AntDesign
                                name="redenvelopes"
                                size={40}
                                color="orange"
                                marginBottom={5}
                                marginTop={5}
                                marginLeft={5}
                            />
                            <Text style={{ marginLeft: "-1%" }} onPress={() => {
                                JSON.stringify(user) === "{}"
                                    ? alert("请先登录")
                                    : onDepositRefund()
                            }}>
                                退还押金
                            </Text>
                        </View>
                        <View style={{ marginTop: "-16.5%", marginLeft: "73%" }} onPress={() => onChat()}>
                            <AntDesign
                                name="aliwangwang-o1"
                                size={44}
                                color="orange"
                                marginBottom={2}
                                marginTop={2}
                                marginLeft={2}
                            />
                            <Text style={{ marginLeft: "12%" }} onPress={() => {
                                JSON.stringify(user) === "{}"
                                    ? alert("请先登录")
                                    : onChat()
                            }}>
                                聊天
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={styles.djx7}>
                    <View style={styles.djx8}>
                        <View style={{ marginLeft: "5%", marginTop: "2.5%" }}>
                            <Entypo
                                name='briefcase'
                                size={36}
                                color="orange"
                            />
                        </View>
                        <Text style={{ marginTop: "-6.5%", marginLeft: "20%" }}>
                            我的钱包
                        </Text>
                        <Text style={{ marginTop: "-7%", marginLeft: "85%" }} onPress={() => {
                            JSON.stringify(user) === "{}"
                                ? alert("请先登录")
                                : onPackage()
                        }
                        }>
                            <Entypo
                                name='chevron-right'
                                size={36}
                            />
                        </Text>
                    </View>
                    <View style={styles.djx8}>
                        <View style={{ marginLeft: "5%", marginTop: "2.5%" }}>
                            <Entypo
                                name='eye'
                                size={36}
                                color="orange"
                            />
                        </View>
                        <Text style={{ marginTop: "-6.5%", marginLeft: "20%" }}>
                            我的发布
                        </Text>
                        <Text style={{ marginTop: "-7%", marginLeft: "85%" }} onPress={() => {
                            JSON.stringify(user) === "{}"
                                ? alert("请先登录")
                                : onRelease()
                        }
                        }>
                            <Entypo
                                name='chevron-right'
                                size={36}
                            />
                        </Text>
                    </View>
                    <View style={styles.djx8}>
                        <View style={{ marginLeft: "5%", marginTop: "2.5%" }}>
                            <AntDesign
                                name='setting'
                                size={36}
                                color="orange"
                            />
                        </View>
                        <Text style={{ marginTop: "-6.5%", marginLeft: "20%" }}>
                            设置
                        </Text>
                        <Text style={{ marginTop: "-7%", marginLeft: "85%" }} onPress={() => {
                            JSON.stringify(user) === "{}"
                                ? alert("请先登录")
                                : onBtn()
                        }}>
                            <Entypo
                                name='chevron-right'
                                size={36}
                            />
                        </Text>
                    </View>
                </View>
            </ImageBackground>
        </View >
    );
}

const styles = StyleSheet.create({
    djx1: {
        width: "90%",
        height: 100,
        backgroundColor: "white",
        marginLeft: "5%",
        marginTop: 15,
        borderRadius: 23,
        borderColor: "lightgrey",
        borderWidth: 1,
    },
    djx2: {
        width: "20%",
        height: "80%",
        marginLeft: "5%",
        marginTop: "2.5%",
        marginBottom: 5,
    },
    djx3: {
        width: "50%",
        height: 70,
        marginLeft: "30%",
        marginTop: "-20%",
    },
    djx4: {
        width: "90%",
        marginLeft: "5%",
        height: 115,
        backgroundColor: "white",
        borderColor: "lightgrey",
        borderWidth: 1,
        marginTop: 15,
        borderRadius: 25,
    },
    djx5: {
        width: 100,
        height: 20,
        marginTop: "2%",
        marginLeft: "5%"
    },
    djx6: {
        width: 100,
        height: 20,
        marginTop: -20,
        marginLeft: "79%"
    },
    djx7: {
        width: "90%",
        height: 240,
        marginLeft: "5%",
        marginTop: 15
    },
    djx8: {
        width: "100%",
        height: 60,
        backgroundColor: "white",
        borderColor: "lightgrey",
        borderWidth: 1,
        borderRadius: 23
    },
    bgimg: {
        flex: 1,
        resizeMode: "cover",
    },

});

export default Center